<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style type="text/css">
    body {
        margin: 0;
    }
    
    .cell-container {
        overflow: hidden;
        text-align: center;
        position: relative;
    }
    
    .cell-wrap {
        display: inline-block;
        position: relative;
    }
    
    .cell-wrap div {
        border-radius: 100%;
    }
    
    .btns {
        text-align: center;
        margin-top: 100px;
    }
    </style>
</head>

<body>
    <div class="cell-container">
        <div class="cell-wrap"></div>
        <div class="cell-wrap"></div>
        <div class="cell-wrap"></div>
        <div class="cell-wrap"></div>
        <div class="cell-wrap"></div>
        <div class="cell-wrap"></div>
    </div>
    <div class="btns">
        <button id="start">开始</button>
        <button id="reset">暂停</button>
    </div>
</body>
<script type="text/javascript" src="cell.js"></script>
<script type="text/javascript">
var c = new cell({
    target: document.querySelector('.cell-container'),
    words: 'AAAAAA',
    baseWidth: 6,
    space: 2
});
var start = document.getElementById('start'),
    reset = document.getElementById('reset'),
    timmer;
start.onclick = function() {
    function format(d) {
        if (d < 10) {
            return '0' + d;
        } else {
            return d + '';
        }
    }

    function count(flag) {
        var d = new Date,
            s = format(d.getHours()) + format(d.getMinutes()) + format(d.getSeconds());
        s = s.split('');
        for (var i = 0; i < s.length; i++) {
            c.set(i, s[i], flag);
        }
    }
    count(true);
    timmer = setInterval(count, 1000);
}
reset.onclick = function() {
    clearInterval(timmer);
}
</script>

</html>
